<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:46 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>监控数据</title>
    
    <link rel="shortcut icon" href="/static/favicon.ico"> <link href="/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="/static/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/static/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <!-- Viedo -->
    <link rel="stylesheet" href="/static/css/plugins/plyr/plyr.css">

    <link href="/static/css/animate.min.css" rel="stylesheet">
    <link href="/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        .data{
            margin: 6px 0;
        }
    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">日</span>
                        <h5>最大人流</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="data"><i class="fa fa-circle"></i>  52 (校园南门)</div>
                        <div class="data"><i class="fa fa-circle"></i>  26 (基教北门)</div>
                        <div class="data"><i class="fa fa-circle"></i>  123 (综合餐厅)</div>
                        <div class="stat-percent font-bold text-success"><a href="javascript:;">详细 <i class="fa fa-bolt"></i></a>
                        </div>
                        <small>昨日概况</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">日</span>
                        <h5>人流高峰</h5>
                    </div>
                    <div class="ibox-content">
                        <!-- <h1 class="no-margins">11:27</h1> -->
                        <div class="data"><i class="fa fa-circle"></i> 11:00~11:10 (校园南门)</div>
                        <div class="data"><i class="fa fa-circle"></i> 12:32~12:45 (基教北门)</div>
                        <div class="data"><i class="fa fa-circle"></i> 12:50~13:00 (综合餐厅)</div>
                        <div class="stat-percent font-bold text-info"><a href="javascript:;">详细 <i class="fa fa-level-up"></i></a>
                        </div>
                        <small>昨日概况</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">最近一个月</span>
                        <h5>异常行为</h5>
                    </div>
                    <div class="ibox-content">
                        <!-- <h1 class="no-margins">106,120</h1> -->
                        <div class="data"><i class="fa fa-circle"></i> 0 (校园南门)</div>
                        <div class="data"><i class="fa fa-circle"></i> 0 (基教北门)</div>
                        <div class="data"><i class="fa fa-circle"></i> 0 (综合餐厅)</div>
                        <div class="stat-percent font-bold text-navy"><a href="javascript:;">详细 <i class="fa fa-level-up"></i></a>
                        </div>
                        <small>5月</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">最近一个月</span>
                        <h5>人流爆发次数</h5>
                    </div>
                    <div class="ibox-content">
                        <!-- <h1 class="no-margins">80,600</h1> -->
                        <div class="data"><i class="fa fa-circle"></i> 12次 (校园南门) <span class="label label-danger" style="font-size: 6px;">高发</span></div>
                        <div class="data"><i class="fa fa-circle"></i> 5次 (基教北门) <span class="label label-warning" style="font-size: 6px;">中等</span></div>
                        <div class="data"><i class="fa fa-circle"></i> 0次 (综合餐厅) <span class="label label-primary" style="font-size: 6px;">低</span></div>
                        <div class="stat-percent font-bold text-danger"><a href="javascript:;">详细 <i class="fa fa-level-up"></i></a>
                        </div>
                        <small>5月</small>
                    </div>
                </div>
            </div>
        </div>
         <div class="wrapper wrapper-content animated fadeInRight" style="padding: 5px;">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>校园南门</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="/detail?site=1">详细数据</a>
                                </li>
                                <li><a href="/detail?site=1">异常记录</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="player">
                            <video poster="/static/img/poster.jpg" autoplay controls crossorigin>
                                <!-- Video files -->
                                <source src="/static/video/01.mp4" type="video/mp4">
                                <!-- <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> -->

                                <!-- Text track file -->
                                <!-- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> -->

                                    <!-- Fallback for browsers that don't support the <video> element -->
                                    <a href="/static/video/01.mp4">Download</a>
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>基教北门</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="/detail?site=2">详细数据</a>
                                </li>
                                <li><a href="/detail?site=2">异常记录</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="player">
                            <video poster="/static/img/poster.jpg" autoplay controls crossorigin>

                                <source src="/static/video/2.mp4" type="video/mp4">
                                                                    <a href="/static/video/2.mp4">Download</a>
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>综合餐厅</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="/detail?site=3">详细数据</a>
                                </li>
                                <li><a href="/detail?site=3">异常记录</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="player">
                            <video poster="/static/img/poster.jpg" autoplay controls crossorigin>
                                <!-- Video files -->
                                <source src="/static/video/3.mp4" type="video/mp4">
                                <!-- <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> -->

                                <!-- Text track file -->
                                <!-- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> -->

                                    <!-- Fallback for browsers that don't support the <video> element -->
                                    <a href="/static/video/3.mp4">Download</a>
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>人流量</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-xs btn-white active">秒</button>
                                <button type="button" class="btn btn-xs btn-white">时</button>
                                <button type="button" class="btn btn-xs btn-white">分</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="flot-chart" style="height: 250px">
                                    <div class="flot-chart-content" id="peopleflow"></div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <ul id="countOrder" class="stat-list"></ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/js/plugins/flot/jquery.flot.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="/static/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/static/js/demo/peity-demo.min.js"></script>
    <script src="/static/js/content.min.js?v=1.0.0"></script>
    <script src="/static/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="/static/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="/static/js/demo/sparkline-demo.min.js"></script>
    <script src="/static/js/plugins/echarts/echarts-all.js"></script>
    <script src="/static/js/plugins/plyr/plyr.js"></script>
    <script>
        (function(d,u){var a=new XMLHttpRequest(),b=d.body;if("withCredentials" in a){a.open("GET",u,true);a.send();a.onload=function(){var c=d.createElement("div");c.setAttribute("hidden","");c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}}})(document, "/static/css/plugins/plyr/sprite.svg");
        // plyr.setup('video', { controls: ['play-large'] });//只显示大按钮
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('peopleflow'));

        sites = []  //地点信息
        order = []  //地点人流量次序
        lastTime = ['','','','','','','']   //最后一次记录时间

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            animation: false,
            legend: {
                data:[]
            },
            tooltip:{
                show:true,
            },
            xAxis: {
                name: '时间 / s',
                data: []
            },
            color:['#ff7f50','#87cefa','#cc5555'],
            yAxis: {},
            series: [],

        };

        function cmp(x,y)
        {
            return option.series[y].data[option.series[y].data.length - 1] - option.series[x].data[option.series[x].data.length - 1]
        }

        function initData()
        {
            // 获取地点信息、阈值
            $.get('/getSites',function(res){
                sites = res
                // 初始化地点次序
                for(var t = 0;t < sites.length;t++)
                    order.push(t)
                option.legend.data = sites.map(x=>{return x.fields.sname})
                // console.log(option.legend.data)
                // 获取每个地点最近人流量
                var s = sites.length

                $.each(sites,function(index,site){
                    // console.log(index,site)
                    $.get('/peoplecount/selectNewest?limit=60&site=' + site.pk,function(res){
                        // console.log(res)
                        // 记录当前最后一个人流记录的时间
                        lastTime[index] = res[0].fields.rtime
                        res.reverse()
                        // 系列数据
                        var serie = {
                            name: site.fields.sname,
                            type: 'line',
                            data: res.map(x=>{return x.fields.rnum}),
                            markLine: {
                                symbol:'none',
                                data: [
                                    {name: '警戒线',yAxis: site.fields.salarm},
                                ]
                            }
                        }
                        option.series.push(serie)
                        // console.log(option)
                        s--
                        if(s == 0)
                        {
                            myChart.setOption(option)
                            order.sort(cmp)
                        }
                    })
                })
            })
        }
        initData()

        //初始化数据
        // time = ['1','2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60']
        // data = [39, 52, 40, 11, 6, 50, 10, 47, 9, 32, 35, 45, 43, 29, 33, 37, 14, 22, 40, 50, 39, 18, 56, 7, 4, 4, 17, 32, 33, 36, 51, 38, 9, 57, 13, 25, 36, 23, 23, 8, 28, 41, 35, 28, 13, 33, 39, 53, 3, 5, 26, 14, 28, 47, 54, 34, 9, 24, 27, 52]
        // option.xAxis.data = time
        // option.series[0].data = data
        //初次渲染
        // myChart.setOption(option)
        //定时刷新
        setInterval(function(){
            var s = sites.length

            $.each(sites,function(index,site){
                $.get('/peoplecount/selectNewest?limit=1&site=' + site.pk,function(res){
                    var time = res[0].fields.rtime
                    // console.log(time)
                    // console.log(lastTime[index])
                    if (time != lastTime[index]) {
                        option.series[index].data.shift()
                        option.series[index].data.push(res[0].fields.rnum)
                        lastTime[index] = time
                    }
                    s--
                    if(s == 0)
                    {
                        order.sort(cmp)
                        $('#countOrder').html('')
                        for(var i = 0;i < sites.length;i++)
                        {
                            if (sites[i].pk == 1) {
                                $('#countOrder').append('<li><h2 class="no-margins">' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '</h2><small>' + sites[order[i]].fields.sname + '</small><div class="stat-percent"><i class="fa fa-circle text-navy"> 监测中</i></div><div class="progress progress-mini"><div style="width: ' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '%;" class="progress-bar"></div></div></li>')
                            }else{
                                $('#countOrder').append('<li><h2 class="no-margins">' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '</h2><small>' + sites[order[i]].fields.sname + '</small><div class="stat-percent"><i class="fa fa-circle text-navy"> 监测中</i></div><div class="progress progress-mini"><div style="width: ' + option.series[order[i]].data[option.series[order[i]].data.length - 1] + '%;" class="progress-bar"></div></div></li>')
                            }
                        }
                        myChart.setOption(option)
                        
                        s = sites.length
                    }
                })
            })

        },1000)
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:49 GMT -->
</html>
